import { defineComponent } from 'vue';
import('./ChooseCardPopup.less');
import setting from '/@/settings/projectSetting';
import { Button, ConfigProvider, Popup, Empty } from 'vant';
import { DeckCardItem } from '/@/api/gateruler/model/deckModel';
import { useVModels } from '@vueuse/core';

export default defineComponent({
  name: 'GateRulerChooseCardPopup',
  props: {
    show: {
      type: Boolean as PropType<boolean>,
      required: true,
      default: () => {
        return false;
      },
    },
    selectCards: {
      type: Array as PropType<DeckCardItem[]>,
      required: true,
    },
    validationCardNum: {
      type: Function as PropType<(card: DeckCardItem) => string>,
      required: true,
    },
  },
  emits: ['update:show', 'addCard', 'delCard'],
  setup(props, { emit }) {
    const { show } = useVModels(props, emit);

    const GetCardArea = () => {
      const { selectCards } = props;

      const listArr: VueNode[] = [];

      const CardAction = ({ card }: { card: DeckCardItem }) => {
        const color = props.validationCardNum(card);
        return (
          <ConfigProvider
            themeVars={{ buttonBorderWidth: 0 }}
            class={'card-action-buttons flex justify-between absolute bg-white'}
          >
            <Button
              plain
              icon={'minus'}
              size={'small'}
              type='primary'
              round
              disabled={!card.number}
              onClick={() => {
                emit('delCard', card);
              }}
            />
            <span class={`card-nums ${color} ${card.number ? '' : 'hidden'}`}>x{card.number}</span>
            <Button
              plain
              icon={'plus'}
              size={'small'}
              type='primary'
              round
              onClick={() => {
                emit('addCard', card);
              }}
            />
          </ConfigProvider>
        );
      };

      selectCards.map((item) => {
        listArr.push(
          <li class={'card-item relative'}>
            <div class='image'>
              <img src={item.img} alt='' onClick={() => {}} />
            </div>
            <div class={'name-box'}>
              <div class={'name-content van-ellipsis text-xs text-white px-md'}>
                [{item.is_foil ? '闪' : '平'}]{item.name}
              </div>
            </div>
            <CardAction card={item} />
          </li>
        );
      });
      if (!listArr.length) {
        return <Empty description={'未选择卡牌'}></Empty>;
      }
      return <ul class='choose-card-list flex flex-wrap'>{listArr}</ul>;
    };

    return () => (
      <Popup
        class='choose-cards-popup'
        v-model={[show.value, 'show']}
        style={{ zIndex: setting.PageTitleZIndex - 1 }}
        overlayStyle={{ zIndex: setting.PageTitleZIndex - 1 }}
        position={'left'}
        teleport={'body'}
      >
        <GetCardArea />
      </Popup>
    );
  },
});
